<template>
  <a-dropdown-button type="text">
    <template #icon>
      <MenuOutlined style="font-size: 22px"/>
    </template>

    <template #overlay>

      <a-affix :offset-top=0>
        <a-menu @click="handleClick" style="background-color: #effcfc">
          <!--        <div style="background-color: #f4f7f8">-->
          <div class="admin" >
            <a-avatar
                :size="{ xs: 84, sm: 92, md: 100, lg: 124, xl: 140, xxl: 160 }"
                :src="store.getters.getAvatar"
            >
            </a-avatar>
          </div>

          <div class="admin" >
          <a-card style="background-color: #effcfc">
              <li>{{store.getters.getSignature}}</li>
          </a-card>
          </div>

          <div class="admin" style="margin: 30px 0 30px">
            <a-row>
              <a-col :span="8">
                <a-statistic title="文章" :value="allCount.essayCount" valueStyle="font-size:20px"/>
              </a-col>
              <a-col :span="8">
                <a-statistic title="标签"  :value="allCount.categoryCount" valueStyle="font-size:20px"/>
              </a-col>
              <a-col :span="8">
                <a-statistic title="类别"  :value="allCount.labelCount" valueStyle="font-size:20px"/>
              </a-col>
            </a-row>
          </div>
          <div style="margin: 10px 10px 10px">
            <a-button type="primary" block @click="()=>{router.push('/resume')}">个人简历</a-button>
          </div>
          <a-divider />



          <div style="margin:0 0 15px">
            <a-menu-item key="/visitor">
              <template #icon>
                <HomeFilled  class="span" style="margin-left: 10px; "/>
              </template>
              <span class="span"> &nbsp;&nbsp;&nbsp;&nbsp;首页</span>
            </a-menu-item>
          </div>

          <div style="margin:0 0 15px">
            <a-menu-item key="/visitor/timeline">
              <template #icon>
                <CalendarFilled class="span" style="margin-left: 10px;"/>
              </template>
              <span class="span">&nbsp;&nbsp;&nbsp;&nbsp;时间轴</span>
            </a-menu-item>
          </div>

          <div style="margin:0 0 15px">
            <a-menu-item key="/visitor/tags">
              <template #icon>
                <TagsFilled class="span" style="margin-left: 10px;"/>
              </template>
              <span class="span">&nbsp;&nbsp;&nbsp;&nbsp;标签</span>
            </a-menu-item>
          </div>

          <div style="margin:0 0 15px">
            <a-menu-item key="/visitor/category">
              <template #icon>
                <FolderOpenFilled class="span" style="margin-left: 10px;"/>
              </template>
              <span class="span">&nbsp;&nbsp;&nbsp;&nbsp;分类</span>
            </a-menu-item>

          </div>
          <!--        </div>-->
        </a-menu>
      </a-affix>

    </template>

  </a-dropdown-button>

</template>

<script setup>
import {
  FolderOpenFilled,
  HomeFilled,
  TagsFilled,
  CalendarFilled,
  MenuOutlined
} from '@ant-design/icons-vue';

import {useRouter} from "vue-router";
import {useStore} from "vuex";
import {ref, watchEffect} from "vue";

const store = useStore()
const router = useRouter()
const allCount=ref()


watchEffect(()=>{
  allCount.value=store.getters.getAllCount
})
const handleClick = (item) => {
  console.log(item)
  const timer = setInterval(function () {
    let osTop = document.documentElement.scrollTop || document.body.scrollTop;
    let ispeed = Math.floor(-osTop / 5);
    document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed;
    this.isTop = true;
    if (osTop === 0) {
      clearInterval(timer);
    }
  }, 10);
  router.push(item.key)
}

</script>

<style scoped>
.span {
  font-size: 18px;
  color: #4e4e4e;
}
.admin{
  text-align: center;
  width: 250px;
  margin:10px 0 10px
}
</style>